<template>
  <div class="wot-process-node">
    <!-- multLang('紧急维护') -->
    <c-row-view :title="data.node_name">
      <template #opn>
        <c-row-view-opn
          :auth="true"
          :visible.sync="visibles.edit"
          @cancel="cancel"
          @save="save"
        >
        </c-row-view-opn>
      </template>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="140px"
        :validate-on-rule-change="false"
      >
        <c-row :col="6">
          <c-col>
            <!-- 工单类型 -->
            <el-form-item
              :label="multLang('工单类型', ':')"
              prop="work_type_id"
            >
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <c-select
                    v-model="form.work_type_id"
                    :options="workTypeAllList"
                  ></c-select>
                </template>
                <span>{{ workTypeAllMap[form.work_type_id] }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <!-- 适用对象 -->
            <el-form-item
              :label="multLang('适用对象', ':')"
              prop="relation_type"
            >
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <c-select
                    v-model="form.relation_type"
                    :options="relationTypeList"
                  ></c-select>
                </template>
                <span>{{ relationTypeMap[form.relation_type] }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <!-- 选择模版 -->
            <el-form-item
              :label="multLang('选择模版', ':')"
              prop="work_template_code"
            >
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <c-select
                    v-model="form.work_template_code"
                    :options="workTemplateList"
                  ></c-select>
                </template>
                <span>{{ workTemplateMap[form.work_template_code] }}</span>
                <template #append>
                  <el-button type="text" @click="getProcessNodeImg">
                    {{ multLang('查看流程图') }}
                  </el-button>
                </template>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <!-- 模版描述 -->
          <c-col :col="11">
            <el-form-item :label="multLang('描述', ':')" prop="remark">
              <c-form-edit :visible="visibles.edit" long>
                <template #edit>
                  <c-input-text v-model="form.remark"></c-input-text>
                </template>
                <span>{{ form.remark }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
        </c-row>
      </el-form>
    </c-row-view>
    <ProcessFieldTable :data="info"></ProcessFieldTable>
    <ProcessPicture :visible.sync="visibles.img" :img="picture">
    </ProcessPicture>
  </div>
</template>
<script>
import { editProcessNodeData, getProcessNodeData } from '@/http/api/v1/wot'
import ProcessFieldTable from './ProcessFieldTable.vue'
import ProcessPicture from './ProcessPicture.vue'
import { IsEmptyObj, ObjectCopy } from '@/util'
import { getProcessLeafImg, getProcessNodeImg } from '@/http/api/v1/file'
export default {
  name: 'ProcessNode',
  components: { ProcessFieldTable, ProcessPicture },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      visibles: {
        edit: false,
        img: false
      },
      picture: '',
      form: {
        node_id: '',
        node_type: '',
        pref_id: '',
        flow_code: '',
        flow_name: '',
        relation_type: '',
        work_type_id: '',
        work_template_code: '',
        remark: ''
      },
      info: {}
    }
  },
  computed: {
    workTypeAllList() {
      return this.optionList('work_type_all')
    },
    workTypeAllMap() {
      return this.optionMap('work_type_all')
    },
    relationTypeList() {
      return this.optionList('relation_type')
    },
    relationTypeMap() {
      return this.optionMap('relation_type')
    },
    workTemplateList() {
      return this.optionList('work_template')
    },
    workTemplateMap() {
      return this.optionMap('work_template')
    },
    rules() {
      return {
        relation_type: {
          required: true,
          message: this.tplLang('text_choose_a', ['适用对象']),
          trigger: 'change'
        },
        work_type_id: {
          required: true,
          message: this.tplLang('text_choose_a', ['工单类型']),
          trigger: 'change'
        },
        work_template_code: {
          required: true,
          message: this.tplLang('text_choose_a', ['模版']),
          trigger: 'change'
        }
      }
    }
  },
  watch: {
    data() {
      this.query()
    }
  },
  beforeCreate() {},
  created() {
    this.query()
    this.setOption({ key: 'work_type_all' })
    this.setOption({ key: 'relation_type' })
    this.setOption({ key: 'work_template' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    cancel() {
      this.setForm()
      this.visibles.edit = false
    },
    save() {
      this.$refs.form.validate(
        valid =>
          valid &&
          editProcessNodeData(this.form).then(() => {
            this.visibles.edit = false
            this.query()
          })
      )
    },
    setForm() {
      IsEmptyObj(this.info)
        ? ObjectCopy(this.form, this.data)
        : ObjectCopy(this.form, this.info)
      this.$nextTick().then(() => this.$refs.form.clearValidate())
    },
    query() {
      const { node_id, node_type, pref_id } = this.data
      node_id &&
        node_type &&
        pref_id &&
        getProcessNodeData({
          node_id,
          node_type,
          pref_id
        }).then(({ data }) => {
          const { base } = data || {}
          this.info = base || {}
          this.setForm()
        })
    },
    getProcessNodeImg() {
      const { flow_code, node_id } = this.data
      this.picture = getProcessNodeImg(flow_code, node_id)
      console.log(this.picture)
      this.visibles.img = true
    },
    getProcessLeafImg() {
      const { node_id } = this.data
      this.picture = getProcessLeafImg(node_id)
      this.visibles.img = true
    }
  }
}
</script>
<style lang="scss">
.wot-process-node {
  height: 100%;
}
</style>
